<template>
    <div class="warrper">
        <swiper :options="swiperOption" ref="mySwiper">
           <swiper-slide>
              <div class="page1" :style="{height: height}"></div>
           </swiper-slide> 
           <swiper-slide>
              <div class="page2" :style="{height: height}"></div>
           </swiper-slide> 
           <swiper-slide>
              <div class="page3" :style="{height: height}"></div>
           </swiper-slide> 
        </swiper> 
        <div class="point">
            <img src="http://assets.rurushishi.com/activies/bgyAct/point_icon.png" alt="">
        </div>

        <div class="return" @click="ret">
            <img src="http://assets.rurushishi.com/activies/bgyAct/return.png" alt="">
            <div class="retext">返回首页</div>
        </div>
    </div>
</template>
<script>
import request from "@/utils/request";
import axios from "axios";
//import { mapMutations } from "vuex";
//import wxsdk from "@/utils/wxsdk";
import { mapState, mapMutations } from "vuex";
import wx from "weixin-js-sdk";

import Cookies from "js-cookie";
import Qs from "qs";

import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import * as config from "./config";
export default {
    data() {
        return{
            swiperOption: {
                direction: 'vertical', //控制横向纵向
                height: window.innerHeight,  // 高度设置，占满设备高度
                // effect: 'coverflow',
                effect: 'flip', //设置切换效果
                loop: true, //控制无限滚动
           },
           height: window.innerHeight+"px",
           openid: Cookies.get("openid"),
           registeroid:this.$route.query.registeroid ? this.$route.query.registeroid : '', //销售中介的openid
        }
    },
    components:{
        swiper,
        swiperSlide
    },
    methods:{


         //返回首页
        ret(){
            // this.$router.push({path:"./index",query:{channel:this.channel,reOpenid:this.reOpenid}});
             window.location.href = location.protocol + '//' + location.host + '/act/bgyact/index?channel=' + this.channel+'&registeroid='+this.registeroid;
        },
        
    ...mapMutations({
      setInfo: "SET_INFO",
      setChannel: "SET_CHANNEL"
    }) 
    },
    computed: {
    ...mapState(["info", "channel"])
    },
    created(){
         this.setChannel(this.$route.query.channel ? this.$route.query.channel : 0);
        request
                    .get(this.global.API_URL, {
                        action: "getUserinfo",
                        requestParam: {
                          
                        }
                    })
                    .then(response => {
                        this.setInfo(response.obj.user);
                        console.log(this.info)
                        if (this.info && this.info.nickname && this.info.nickname != '') {
                            this.global.SHARE_TITLE = this.info.nickname + "邀请你参加碧桂园27周年庆专属优惠 最大折合9折";
                        }
                        this.global.SHARE_LINK = location.protocol + '//' + location.host + '/act/bgyact/main?channel=' + this.channel + '&reOpenid=' + this.openid+'&registeroid='+this.registeroid;
                    });

       config.initShare();
    },
    mounted(){
          let _self = this;
           _self.global.SHARE_CALLBACK_OK = function (type) {
            //  let _self = this;
             let query = {
                activityId: config.ACT_CODE,
                // channel: 1,
                openId: Cookies.get("openid")
              };
                axios
                    .post(
                    `${_self.global.API_FORUM_URL}/api/activity/share?${Qs.stringify(
                      query
                    )}`,
                    {
                      
                    })
                    .then(response => {
                        if(response.code==0){
                          _self.isshare = false;
                        }
                         
                    });

            };
            config.initShare();
    }
}
</script>
<style lang = "stylus" scoped>
     .warrper{
         position fixed 
         top 0
         left 0
         right 0
         bottom 0
         background #081330
     }
     .page1{
         width 100%
         height 100%
         background url( http://assets.rurushishi.com/activies/bgyAct/rule1.jpg) no-repeat
         background-size 100% 100%
     }
     .page2{
         width 100%
         height 100%
         background url( http://assets.rurushishi.com/activies/bgyAct/rule10.jpg) no-repeat
         background-size 100% 100%
     }
     .page3{
         width 100%
         height 100%
         background url( http://assets.rurushishi.com/activies/bgyAct/rule11.jpg) no-repeat
         background-size 100% 100%
     }
     .point{
        width 100%
        height 1rem
        text-align center
    }
    .point>img{
        animation beat  1s infinite
        width .34rem
        height .58rem
        position: fixed;
        bottom: .3rem;
        z-index: 100;
    }
    .return{
        position absolute
        bottom: 1.2rem
        right 0
        width: 1.2rem
        text-align center
        vertical-align middle
        z-index 100
    }
    .return>img{
        width: .81rem
        // width: 100%
        height: .81rem
    }
    .retext{
    line-height .5rem
    font-size .24rem
    color #fff
    }

    @keyframes beat {
        25% {
            transform: translateY(.2rem);
        }

        50%, 100% {
            transform: translateY(0rem);
        }

        75% {
            transform: translateY(.2rem);
        }
    }
</style>


